<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE HTML>
	<link href="${staticUrl_ }/css/plugins/multipleselectbox/multipleselectbox.css" rel="stylesheet">
	<div class="row">
		<div class="col-lg-4">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>未选角色</h5>
				</div>
				<div class="ibox-content">
					<div class="well">
						<%-- <select name="left_select" multiple="multiple" id="left_select" style="width: 100%; height: 260px;">
							<c:forEach items="${unselectedRoleList}" var="data" varStatus="loop">
								<option value="${data.id }"><font style="font-weight:600;">${data.name }</font></option>
							</c:forEach>
						</select> --%>
						<ul id="MultipleSelectBox-left-select">
							<c:forEach items="${unselectedRoleList}" var="data" varStatus="loop">
								<li value="${data.id }">${data.name }</li>
							</c:forEach>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4">
			<div style="text-align: center;">
				<input type="button" value="<" style="font-size:10pt;width:35px" onclick="left()">
				<br><br>  
				<input type="button" value="<<" style="font-size:10pt;width:35px" onclick="left(true)">
				<br><br>  
				<input type="button" value=">" style="font-size:10pt;width:35px" onclick="right()">
				<br><br>  
				<input type="button" value=">>" style="font-size:10pt;width:35px" onclick="right(true)">
				<br><br>
			</div>
		</div>
		<div class="col-lg-4">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>已选角色</h5>
				</div>
				<div class="ibox-content">
					<div class="well">
						<%-- <select name="right_select" multiple="multiple" id="right_select" style="width: 100%; height: 260px;">
							<c:forEach items="${selectedRoleList}" var="data" varStatus="loop">
								<option value="${data.id }"><font style="font-weight:600;">${data.name }</font></option>
							</c:forEach>
						</select>   --%>
						<ul id="MultipleSelectBox-right-select">
							<c:forEach items="${selectedRoleList}" var="data" varStatus="loop">
								<li value="${data.id }">${data.name }</li>
							</c:forEach>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="ibox-content">
		<div class="form-group">
			<div class="col-sm-4 col-sm-offset-2" style="margin-left: 45%;">
				<button class="btn btn-white" type="submit"
					onclick="javaScript:history.go(-1);return false;">返回</button>
				<button class="btn btn-primary" type="button" onclick="saveRoleRel();">保存</button>
			</div>
		</div>
	</div>
	
	<script src="${staticUrl_ }/js/plugins/multipleselectbox/jquery.multipleselectbox.js"></script>
	<script type="text/javascript">
		<!--
		
		$(document).ready(function() {
			$("#MultipleSelectBox-left-select").multipleSelectBox();
			$("#MultipleSelectBox-right-select").multipleSelectBox();
		});
		
		//isAll 是否全部移动
		function left(isAll){
			var os = new Array();
			os = $("#MultipleSelectBox-right-select").find("li");
			for(i=0;i<os.length;i++){
				if(isAll){
					$("#MultipleSelectBox-left-select").append(os[i]);
					$("#MultipleSelectBox-right-select").find("li").remove();
				}else{
					if($(os[i]).hasClass('selected')){
						$("#MultipleSelectBox-left-select").append(os[i]);
						$("#MultipleSelectBox-right-select").find("li:selected").remove();
					}
				}
			}
		}
		function right(isAll){
			var os = new Array();
			os = $("#MultipleSelectBox-left-select").find("li");
			for(i=0;i<os.length;i++){
				if(isAll){
					$("#MultipleSelectBox-right-select").append(os[i]);
					$("#MultipleSelectBox-left-select").find("li").remove();
				}else{
					if($(os[i]).hasClass('selected')){
						$("#MultipleSelectBox-right-select").append(os[i]);
						$("#MultipleSelectBox-left-select").find("li:selected").remove();
					}
				}
			}
		}
		
		function saveRoleRel() {
			var arr = new Array(); //数组定义标准形式，不要写成Array arr = new Array();
			$("#MultipleSelectBox-right-select li").each(function () {
			    var val = $(this)[0].getAttribute('value'); //获取单个value
			    arr.push(val);
			});
			
			StandardPost('${context_}/${moduleName}/saveRels',
				{
					sysmanRoleIds: arr
				}
			);
		}
		//-->
	</script>
</html>